웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트 배열의 flat() 메소드에 대하여 알아봅니다.
배열에 사용하는 메소드 flat()은 평평하다는 사전적 의미를 가지고 있습니다. 이처럼 배열을 평평하게 만들어주는 역할을 합니다. 평평하게 만든다는 무슨 의미일까요? 예를들어 배열 내부에 배열이 존재하는 다차원 배열(multy-dimensional array)에 주로 사용되는 메소드입니다. 이런 다차원 배열의 차원을 줄여주는 ... 즉 2차원 배열은 1차원 배열로 바꾸는 경우 flat() 메소드를 사용할 수 있습니다.
[ 참고 ] 메모리에 값이 저장될 때 2차원 배열 형식으로 저장된다고 합니다.
아래는 간략한 문법입니다.
Array.flat(depth)
// depth : 평평하게 flat하게 할 depth의 값을 설정함
여기서 선택 옵션으로 depth 값을 설정할 수 있으며 이 경우 어느 정도로 flatten하게 할 것인지를 정할 수 있습니다. 이는 아래 예제에서 자세히 보도록 하겠습니다. 그 전에 flat()을 사용하는 경우는 언제 있을까요?
! 배열 메소드 flat()은 언제 사용할까?
많이 쓰이지만 가장 많이 쓰이는 경우는 컬렉션 데이터를 조작하는 경우 Object.entries()와 같이 쓰이는 경우가 많습니다. 여기서 Object.entries()는 객체를 배열로 변환하는 내장함수입니다. 객체를 배열로 변환하는 경우 n차원 배열로 변환하게 됩니다. 이처럼 객체를 배열로 변환하여 사용하는 경우가 많은데 필요한 데이터만 객체에서 추출해 배열로 배열해 사용하면 참조나 변환이 간단하기 때문입니다. 물론 이런 경우 lodash, underscore 같은 라이브러리를 사용하는게 편리하기도 합니다. lodash도 flat() flatMap() 등을 제공하고 있으니 참고만 해두세요!
자주 사용되는 예를 알아봤으니 이제 실제로 flat()을 배열값에 적용해보도록 하겠습니다. 아래 예제를 봐주세요!!
예제 1) 2차원 배열에 flat() 사용하기
결과를 확인하면 배열 내부에 있던 배열이 flattern 형태로 제거되어 반환된 것을 알 수 있습니다. 여기에 depth 옵션값을 주면 어떻게 변환되는지 확인해보면 좋겠죠. 각각 0, 1의 값을 사용하고 결과를 알아보겠습니다.
결과를 보니 flat(0)인 경우에는 변환가 없었습니다. 즉 flat()을 사용하지 않은 경우와 동일합니다. 그리고 flat(1)인 경우에는 위와 동일한 결과가 나타납니다. 예상했던 대로 결과가 나타났습니다. 만약 3차원 배열에 flat(2)를 적용하면 그 결과는 어떻게 되는지 알아봅니다.
예제 2) 3차원 배열에 flat(2) 사용하기
출력 결과를 보니 flat()을 그냥 사용한 경우 flat(1)과 동일하다는 것을 확인했습니다. 즉 가장 인접한 내부의 배열만 배열 밖으로 나오게 되었습니다. 이처럼 flat(n)을 사용하면 원하는 만큼 flatten 할 수 있겠습니다.
여기까지 배열 메소드 flat()에 대하여 알아봤습니다.
참고로 flatMap() 역시 비슷하게 사용되는 메소드입니다. 이 메소드는 다음에 알아보도록 하겠습니다.
# 자바스크립트 배열 flat() 메소드
배열에 사용하는 메소드 flat()은 평평하다는 사전적 의미를 가지고 있습니다. 이처럼 배열을 평평하게 만들어주는 역할을 합니다. 평평하게 만든다는 무슨 의미일까요? 예를들어 배열 내부에 배열이 존재하는 다차원 배열(multy-dimensional array)에 주로 사용되는 메소드입니다. 이런 다차원 배열의 차원을 줄여주는 ... 즉 2차원 배열은 1차원 배열로 바꾸는 경우 flat() 메소드를 사용할 수 있습니다.
[ 참고 ] 메모리에 값이 저장될 때 2차원 배열 형식으로 저장된다고 합니다.
아래는 간략한 문법입니다.
Array.flat(depth)
// depth : 평평하게 flat하게 할 depth의 값을 설정함
여기서 선택 옵션으로 depth 값을 설정할 수 있으며 이 경우 어느 정도로 flatten하게 할 것인지를 정할 수 있습니다. 이는 아래 예제에서 자세히 보도록 하겠습니다. 그 전에 flat()을 사용하는 경우는 언제 있을까요?
! 배열 메소드 flat()은 언제 사용할까?
많이 쓰이지만 가장 많이 쓰이는 경우는 컬렉션 데이터를 조작하는 경우 Object.entries()와 같이 쓰이는 경우가 많습니다. 여기서 Object.entries()는 객체를 배열로 변환하는 내장함수입니다. 객체를 배열로 변환하는 경우 n차원 배열로 변환하게 됩니다. 이처럼 객체를 배열로 변환하여 사용하는 경우가 많은데 필요한 데이터만 객체에서 추출해 배열로 배열해 사용하면 참조나 변환이 간단하기 때문입니다. 물론 이런 경우 lodash, underscore 같은 라이브러리를 사용하는게 편리하기도 합니다. lodash도 flat() flatMap() 등을 제공하고 있으니 참고만 해두세요!
자주 사용되는 예를 알아봤으니 이제 실제로 flat()을 배열값에 적용해보도록 하겠습니다. 아래 예제를 봐주세요!!
예제 1) 2차원 배열에 flat() 사용하기
const myArray = [ [1, 1], [1, 2] ]
myArray.flat()
// 출력결과
[1, 1, 1, 2]
myArray.flat()
// 출력결과
[1, 1, 1, 2]
결과를 확인하면 배열 내부에 있던 배열이 flattern 형태로 제거되어 반환된 것을 알 수 있습니다. 여기에 depth 옵션값을 주면 어떻게 변환되는지 확인해보면 좋겠죠. 각각 0, 1의 값을 사용하고 결과를 알아보겠습니다.
myArray.flat(0)
myArray.flat(1)
// 출력결과
[ [1, 1], [1, 2] ]
[1, 1, 1, 2]
myArray.flat(1)
// 출력결과
[ [1, 1], [1, 2] ]
[1, 1, 1, 2]
결과를 보니 flat(0)인 경우에는 변환가 없었습니다. 즉 flat()을 사용하지 않은 경우와 동일합니다. 그리고 flat(1)인 경우에는 위와 동일한 결과가 나타납니다. 예상했던 대로 결과가 나타났습니다. 만약 3차원 배열에 flat(2)를 적용하면 그 결과는 어떻게 되는지 알아봅니다.
예제 2) 3차원 배열에 flat(2) 사용하기
const myArray = [ [ [1, 1], [1, 2] ] ]
myArray.flat()
myArray.flat(2)
// 출력결과
[ [1, 1], [1, 2] ]
[1, 1, 1, 2]
myArray.flat()
myArray.flat(2)
// 출력결과
[ [1, 1], [1, 2] ]
[1, 1, 1, 2]
출력 결과를 보니 flat()을 그냥 사용한 경우 flat(1)과 동일하다는 것을 확인했습니다. 즉 가장 인접한 내부의 배열만 배열 밖으로 나오게 되었습니다. 이처럼 flat(n)을 사용하면 원하는 만큼 flatten 할 수 있겠습니다.
! 마치면서
여기까지 배열 메소드 flat()에 대하여 알아봤습니다.
참고로 flatMap() 역시 비슷하게 사용되는 메소드입니다. 이 메소드는 다음에 알아보도록 하겠습니다.
아래의 글도 찾고 계시지 않나요?